import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:foxue/global.dart';
import 'package:flutter/material.dart';
import 'package:foxue/http/api.dart';
import 'package:foxue/page/directory.dart';
import 'package:foxue/page/search.dart';

class IndexPage extends StatefulWidget {
  IndexPage({Key key}) : super(key: key);
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  var _items = [];
  @override
  void initState() {
    EasyLoading.show();
    getFoxueList().then((res) {
      EasyLoading.dismiss();
      setState(() {
        _items = res['result'];
      });
    });
    super.initState();
  }

  List<Widget> renderFoxueList(items) {
    List<Widget> list = [];
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      list.add(GestureDetector(
        child: Container(
          width: 175,
          height: 280,
          margin: EdgeInsets.fromLTRB(0, 20, 0, 10),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/book.png"),
              repeat: ImageRepeat.repeat,
              fit: BoxFit.fitWidth,
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.3),
                offset: Offset(0, 2),
                blurRadius: 5,
                spreadRadius: 2,
              )
            ],
          ),
          child: Stack(
            children: [
              Positioned(
                top: 33,
                left: 34,
                child: Container(
                  width: 20,
                  height: 180,
                  child: Center(
                    child: Text(
                      item['name'],
                      style: TextStyle(
                        fontFamily: 'fangzhengkai',
                        fontWeight: FontWeight.w700,
                        fontSize: 20,
                        color: Global.fontColor,
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (_) => DirectoryPage(id: item['id']),
            ),
          );
        },
      ));
    }

    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
        color: Global.backgroundColor,
      ),
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.fromLTRB(0, Global.paddingTop, 0, 10),
            decoration: BoxDecoration(
              color: Global.backgroundColor,
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.2),
                  offset: Offset(0, 2),
                  blurRadius: 2,
                  spreadRadius: 2,
                )
              ],
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(width: 58),
                Expanded(
                  child: Center(
                    child: Text(
                      '佛学辞典',
                      style: TextStyle(
                        fontFamily: 'fangzhengkai',
                        fontWeight: FontWeight.w700,
                        fontSize: 18,
                        color: Global.fontColor,
                      ),
                    ),
                  ),
                ),
                IconButton(
                  icon: Icon(
                    Icons.search,
                    color: Global.primaryColor,
                    size: 27,
                  ),
                  tooltip: '搜索',
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => SearchPage(),
                      ),
                    );
                  },
                ),
                SizedBox(width: 10),
              ],
            ),
          ),
          Expanded(
            child: SingleChildScrollView(
              child: Wrap(
                alignment: WrapAlignment.center,
                spacing: 20,
                runAlignment: WrapAlignment.end,
                children: renderFoxueList(_items),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
